<template>
  <div>
    <div style="display: flex;justify-content: flex-end;">
      <Button style="margin:2px 12px 10px;" type="primary" @click="createRecruit">创建招聘计划</Button>
    </div>

    <can-edit-table
      refs="table"
      v-model="dataList"
      @on-delete="handleDel"
      @on-edit2="handleEdit"
      :columns-list="columnList">
    </can-edit-table>
    <Page style="float: right; margin:10px;" :current="current_num" :total="page_count" :pageSize="page_size" showElevator showSizer @on-page-size-change="handleSizeChange" @on-change="handleChangePage"></Page>

    <Modal v-model="modal_show" title="创建招聘计划" width="500" :styles="{top: '40px'}" :mask-closable="false">

      <div style="text-align:center;">
        <Form ref="recruitFormValidate" :model="recruitFormValidate" :rules="recruitRuleValidate" :label-width="70">
          <Form-item prop="section" label="部门">
            <Input v-model="recruitFormValidate.section" type="text" placeholder="请输入部门名"/>
          </Form-item>

          <Form-item prop="jobType" label="职位类型">
            <Input v-model="recruitFormValidate.jobType" type="text" placeholder="请输入职位类型"/>
          </Form-item>

          <Form-item prop="jobName" label="岗位">
            <Input v-model="recruitFormValidate.jobName" type="text" placeholder="请输入岗位名称"/>
          </Form-item>

          <Form-item prop="requireNum" label="人数">
            <Input v-model="recruitFormValidate.requireNum" type="text" placeholder="请输入人数"/>
          </Form-item>

          <Form-item prop="city" label="城市">
            <Input v-model="recruitFormValidate.city" type="text" placeholder="请输入城市"/>
          </Form-item>

          <Form-item prop="recruitType" label="招聘类型">
            <Select v-model="recruitFormValidate.recruitType" placeholder="请输入招聘类型">
              <Option value="社招">社招</Option>
              <Option value="校招">校招</Option>
              <Option value="实习生">实习生</Option>
            </Select>
          </Form-item>

          <Form-item prop="endTime" label="截止时间">
            <DatePicker type="date" placeholder="选择时间" v-model="recruitFormValidate.endTime"></DatePicker>
          </Form-item>

          <Form-item prop="isOpen" label="是否对外">
            <RadioGroup v-model="recruitFormValidate.isOpen">
              <Radio label="是">是</Radio>
              <Radio label="否">否</Radio>
            </RadioGroup>
          </Form-item>

          <Form-item prop="description" label="岗位介绍">
            <Input v-model="recruitFormValidate.description" type="textarea" placeholder="请输入介绍"/>
          </Form-item>

          <Form-item prop="requirement" label="岗位要求">
            <Input v-model="recruitFormValidate.requirement" type="textarea" placeholder="请输入要求"/>
          </Form-item>

          <Form-item prop="remark" label="备注">
            <Input v-model="recruitFormValidate.remark" type="textarea" placeholder="请输入备注"/>
          </Form-item>
        </Form>

      </div>

      <div slot="footer">
        <Button type="primary" size="large" long @click="submitCreate('recruitFormValidate')">提交</Button>
      </div>
    </Modal>

    <Modal v-model="modal_edit_show" title="编辑招聘计划" width="500" :styles="{top: '40px'}" :mask-closable="false">

      <div style="text-align:center;">
        <Form ref="recruitFormValidateEdit" :model="recruitFormValidateEdit" :rules="recruitRuleValidate" :label-width="70">
          <Form-item prop="section" label="部门">
            <Input v-model="recruitFormValidateEdit.section" type="text" placeholder="请输入部门名"/>
          </Form-item>

          <Form-item prop="jobType" label="职位类型">
            <Input v-model="recruitFormValidateEdit.jobType" type="text" placeholder="请输入职位类型"/>
          </Form-item>

          <Form-item prop="jobName" label="岗位">
            <Input v-model="recruitFormValidateEdit.jobName" type="text" placeholder="请输入岗位名称"/>
          </Form-item>

          <Form-item prop="requireNum" label="人数">
            <Input v-model="recruitFormValidateEdit.requireNum" type="text" placeholder="请输入人数"/>
          </Form-item>

          <Form-item prop="city" label="城市">
            <Input v-model="recruitFormValidateEdit.city" type="text" placeholder="请输入城市"/>
          </Form-item>

          <Form-item prop="recruitType" label="招聘类型">
            <Select v-model="recruitFormValidateEdit.recruitType" placeholder="请输入招聘类型">
              <Option value="社招">社招</Option>
              <Option value="校招">校招</Option>
              <Option value="实习生">实习生</Option>
            </Select>
          </Form-item>

          <Form-item prop="endTime" label="截止时间">
            <DatePicker type="date" placeholder="选择时间" v-model="recruitFormValidateEdit.endTime"></DatePicker>
          </Form-item>

          <Form-item prop="isOpen" label="是否对外">
            <RadioGroup v-model="recruitFormValidateEdit.isOpen">
              <Radio label="是">是</Radio>
              <Radio label="否">否</Radio>
            </RadioGroup>
          </Form-item>

          <Form-item prop="description" label="岗位介绍">
            <Input v-model="recruitFormValidateEdit.description" type="textarea" placeholder="请输入介绍"/>
          </Form-item>

          <Form-item prop="requirement" label="岗位要求">
            <Input v-model="recruitFormValidateEdit.requirement" type="textarea" placeholder="请输入要求"/>
          </Form-item>

          <Form-item prop="remark" label="备注">
            <Input v-model="recruitFormValidateEdit.remark" type="textarea" placeholder="请输入备注"/>
          </Form-item>
        </Form>

      </div>

      <div slot="footer">
        <Button type="primary" size="large" long @click="submitEdit('recruitFormValidateEdit')">提交</Button>
      </div>
    </Modal>

  </div>
</template>
<script>
  import canEditTable from './part/canEditTable.vue';
  import recruitApi from '../api/axios/recruitApi'

  export default {
    components: {
      canEditTable
    },
    data () {
      return {
        current_num: 1,
        page_count: 5,
        page_size: 5,
        current_index: 1,
        modal_show: false,
        modal_edit_show: false,
        recruitFormValidate: {
          section: '',
          jobType: '' ,
          jobName: '',
          requireNum: '',
          city: '',
          recruitType: '',
          endTime: '',
          isOpen: '',
          description: '',
          requirement: '',
          remark: ''
        },
        recruitFormValidateEdit: {
          section: '',
          jobType: '' ,
          jobName: '',
          requireNum: '',
          city: '',
          recruitType: '',
          endTime: '',
          isOpen: '',
          description: '',
          requirement: '',
          remark: ''
        },
        recruitRuleValidate: {
          section: [
            {required: true, message: '部门不能为空', trigger: 'blur'}
          ],
          jobType: [
            {required: true, message: '职位类型不能为空', trigger: 'blur'}
          ],
          jobName: [
            {required: true, message: '岗位不能为空', trigger: 'blur'}
          ],
          requireNum: [
            {required: true, message: '人数不能为空', trigger: 'blur'}
          ],
          city: [
            {required: true, message: '城市不能为空', trigger: 'blur'}
          ],
          recruitType: [
            {required: true, message: '招聘类型不能为空', trigger: 'change'}
          ],
          endTime: [
            {required: true, type: 'date', message: '结束时间不能为空', trigger: 'change'}
          ],
          isOpen: [
            {required: true, message: '对外不能为空', trigger: 'change'}
          ],
          description: [
            {required: true, message: '介绍不能为空', trigger: 'blur'}
          ],
          requirement: [
            {required: true, message: '要求不能为空', trigger: 'blur'}
          ]
        },
        columnList: [
          {
            title: '序号',
            type: 'index',
            align: 'center'
          },
          {
            title: '部门',
            key: 'section',
            sortable: true
          },
          {
            title: '职位类型',
            key: 'jobType',
            sortable: true
          },
          {
            title: '岗位',
            key: 'jobName',
            sortable: true
          },
          {
            title: '人数',
            key: 'requireNum',
            sortable: true
          },
          {
            title: '城市',
            key: 'city',
            sortable: true
          },
          {
            title: '招聘类型',
            key: 'recruitType',
            sortable: true
          },
          {
            title: '截止时间',
            key: 'endTime',
            sortable: true
          },
          {
            title: '是否对外',
            key: 'isOpen',
            sortable: true
          },
          {
            title: '发布者',
            key: 'staffName',
            sortable: true
          },
          {
            title: '备注',
            key: 'remark',
            sortable: true
          },
          {
            title: '操作',
            align: 'center',
            key: 'handle',
            width: 125,
            handle: ['edit2', 'delete']
          }
        ],
        dataList: []
      }
    },
    computed: {
      getStaffId (){
        return this.$store.getters['auth/getStaffId'];
      }
    },
    methods:{
      createRecruit (){
        this.modal_show = true;
      },
      submitCreate (recruitFormValidate){
        this.$refs[recruitFormValidate].validate((valid) => {
          if (valid) {
            this.modal_show = false;

            let that = this;
            recruitApi.addRecruitPlan({
              staffId: that.getStaffId,
              section: that.recruitFormValidate.section,
              jobType: that.recruitFormValidate.jobType,
              jobName: that.recruitFormValidate.jobName,
              requireNum: that.recruitFormValidate.requireNum,
              city: that.recruitFormValidate.city,
              recruitType: that.recruitFormValidate.recruitType,
              endTime: that.recruitFormValidate.endTime,
              isOpen: that.recruitFormValidate.isOpen,
              description: that.recruitFormValidate.description.replace(/\n|\r\n/g,"<br>"),
              requirement: that.recruitFormValidate.requirement.replace(/\n|\r\n/g,"<br>"),
              remark: that.recruitFormValidate.remark
            },{
              success (res) {
                if (res.data.status === 200) {
                  that.$Message.success("创建成功");
//                  that.$router.go(0); 是页面刷新，不是路由刷新
                }else {
                  console.log("addRecruitPlan 请求失败：" + res.data);
                }
              }
            });

          } else {
            this.$Message.error('请重新填写');
          }
        });
      },
      submitEdit (recruitFormValidateEdit){
        this.$refs[recruitFormValidateEdit].validate((valid) => {
          if (valid) {
            this.modal_edit_show = false;

            let that = this;
            recruitApi.modifyRecruit({
              jobId: that.recruitFormValidateEdit.jobId,
              section: that.recruitFormValidateEdit.section,
              jobType: that.recruitFormValidateEdit.jobType,
              jobName: that.recruitFormValidateEdit.jobName,
              requireNum: that.recruitFormValidateEdit.requireNum,
              city: that.recruitFormValidateEdit.city,
              recruitType: that.recruitFormValidateEdit.recruitType,
              endTime: that.formatDate(that.recruitFormValidateEdit.endTime),
              isOpen: that.recruitFormValidateEdit.isOpen,
              description: that.recruitFormValidateEdit.description.replace(/\n|\r\n/g,"<br>"),
              requirement: that.recruitFormValidateEdit.requirement.replace(/\n|\r\n/g,"<br>"),
              remark: that.recruitFormValidateEdit.remark
            },{
              success (res) {
                if (res.data.status === 200) {
                  that.$Message.success("修改成功");

                  let arr = JSON.parse(JSON.stringify(that.dataList));
//                  that.recruitFormValidateEdit.endTime = JSON.stringify(that.recruitFormValidateEdit.endTime).substr(1,10);
                  that.recruitFormValidateEdit.endTime = that.formatDate(that.recruitFormValidateEdit.endTime);
                  arr[that.current_index] = that.recruitFormValidateEdit;
                  that.dataList = arr;

                }else {
                  that.$Message.error("修改失败");
                  console.log("modifyRecruit 请求失败：" + res.data);
                }
              }
            });
          } else {
            this.$Message.error('请重新填写');
          }
        });

      },
      handleDel (val, index) {

        let that = this;
        recruitApi.deleteRecruit({
          jobId: val[index].jobId
        },{
          success (res) {
            if (res.data.status === 200) {
              that.$Message.success("删除成功");

              that.dataList.splice(index,1);

            }else {
              that.$Message.error("删除失败");
              console.log("deleteRecruit 请求失败：" + res.data);
            }
          }
        });

//        console.log(JSON.stringify(val));
//        this.$Message.success('删除了第' + (index + 1) + '行数据');
      },
      handleEdit (val, index) {
        val[index].requireNum = val[index].requireNum+"";
        this.recruitFormValidateEdit = val[index];
        this.current_index = index;
        this.modal_edit_show = true;
//        this.$Message.success('查看了第' + (index + 1) + '行数据');
      },
      handleChangePage(pageNum){
        this.current_num = pageNum;
        this.updateRecruitPlanList();
      },
      handleSizeChange(pageSize){
        this.page_size = pageSize;
        this.updateRecruitPlanList();
      },
      updateRecruitPlanList(){
        let that = this;
        recruitApi.getRecruitList({
          currentPage: that.current_num,
          pageSize: that.page_size
        },{
          success (res) {
            if (res.data.status === 200) {
              that.dataList = res.data.data.list.map(function (item, index) {
                item.description = item.description.replace(/<br>/g,"\n");
                item.requirement = item.requirement.replace(/<br>/g,"\n");
                return item;
              });
              that.page_count = res.data.data.count;
            }else {
              console.log("getRecruitList 请求失败：" + res.data);
            }
          }
        })
      },
      formatDate(daytime){
        return daytime.getFullYear()+"-"+(daytime.getMonth()+1)+"-"+daytime.getDate();
      }
    },
    created() {
      this.updateRecruitPlanList();
    }
  }
</script>
<style>

</style>
